<script setup lang="ts">
import { ref } from 'vue';
import { useNurseGoods } from '@/service';
import { useRouterPush } from '@/composables';
import { useImage } from '@/hooks';
import { hideLoading, showLoading, usePullDownRefresh, stopPullDownRefresh } from '@tarojs/taro';

const { getGoodsList } = useNurseGoods();

definePageConfig({
    navigationBarTitleText: '母婴护理',
    enablePullDownRefresh: true
});

getData();

usePullDownRefresh(() => {
    getData();
    stopPullDownRefresh();
});

const list = ref();

async function getData() {
    showLoading({ title: '正在请求数据...' });

    const { error, success } = await getGoodsList({ pid: '1', nurse_type: '4', user_id: '0' });

    if (!error && success) list.value = success;

    hideLoading();
}

const { toGoodsDetail } = useRouterPush();

function toDetail(item: any) {
    toGoodsDetail({
        id: item.key,
        pic: item.pic,
        pname: item.title,
        unit: item.unit,
        nurseType: '4',
        goods_type: '1',
        nurseTypeText: '母婴护理'
    });
}
</script>
<template>
    <basic-layout>
        <!-- <custom-navbar title="母婴护理" showLeft /> -->
        <nut-empty v-if="!list || list.length == 0" description="暂无数据"></nut-empty>
        <view class="w-375px text-primary flex-col-center">
            <view v-for="item in list" class="w-360px">
                <view class="w-full h-240 b-rounded-3 shadow mt-2 bg-#fff flex justify-start items-center"
                    @click="toDetail(item)">
                    >
                    <view class="w-120px h-full">
                        <image :src="useImage(item.pic)" alt="" class="_img" draggable="false" />
                    </view>
                    <view class="ml-1 w-240px h-full flex-col justify-start items-start">
                        <view class="w-full text-xl">{{ item.title }}</view>
                        <view class="w-full text-lg">{{ item.specs ? `${item.specs}/${item.unit}` : '￥' }}</view>
                        <view class="w-full w-full text-xs text-blueGray">{{ item.details }}</view>
                        <view class="w-full mt-1 font-size-20rpx">1000+好评</view>
                    </view>
                </view>
            </view>
        </view>
    </basic-layout>
</template>
<style lang="scss">
._img {
    height: 100%;
    width: 100%;
    border-top-left-radius: 24rpx;
    border-bottom-left-radius: 24rpx;
}
</style>
